<template>
  <div class="app">
    <!-- 导航区 -->
    <ul class="navigate">
      <li>
        <RouterLink class="size" to="/discover"
          ><i class="iconfont icon-faxian"> <span class="span-channel">发现</span></i></RouterLink
        >
      </li>
      <li>
        <RouterLink class="size" to="/release"
          ><i class="iconfont icon-fabu"> <span class="span-channel">发布</span></i></RouterLink
        >
      </li>
      <li>
        <RouterLink class="size" to="/notice"
          ><i class="iconfont icon-tongzhi"> <span class="span-channel">通知</span></i></RouterLink
        >
      </li>
      <li>
        <RouterLink class="size" to="/myself"
          ><i class="iconfont icon-wode"> <span class="span-channel">我的</span></i></RouterLink
        >
      </li>
    </ul>
    <button @click="openModal" class="loginpage">登录</button>
    <div class="size-more">
      <RouterLink class="size" to="/more"
        ><i class="iconfont icon-gengduo"> <span class="span-channel">更多</span></i></RouterLink
      >
    </div>
    <LoginModal :isVisible="isModalVisible" @close="closeModal" />
  </div>
</template>

<script>
import LoginModal from "@/components/LoginModal.vue";

export default {
  name: "side-bar",
  components: {
    LoginModal,
  },
  data() {
    return {
      isModalVisible: false,
    };
  },
  methods: {
    openModal() {
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
    },
  },
};
</script>

<style scoped>
.app {
  float: left;
  position: fixed;
  left: 10px;
  width: 252.67px;
  height: calc(100vh - 72px);
  overflow-y: scroll;
  padding-top: 16px;
  margin-top: 72px;
  overflow: visible;
}

.navigate {
  width: 100%;
  min-height: auto;
}

.navigate li{ 
  width: 241.59px;
  height: 48px;
  border-radius: 99px ;
  /* background-color: #cacaca; */
  padding-left: 16px;
  margin-bottom: 8px;
  cursor: pointer;
}

.navigate li i:hover{
  color:#33333399;
}



.navigate li i{
  font-size: 20px;
  font-weight: 800;
}

.span-channel{
  color: #333333;
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
}

.size {
  display: flex;
  color: #333333;
  width: 100%;
  height: 48px;
  align-items: center;
}

.size-more {
  position: fixed;
  bottom: 20px;
  margin-left: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  height: 48px;
  width: 241.59px;
  display: flex;
}

.gengduo {
  display: flex;
  bottom: 100px;
}

.loginpage {
  margin-top: 10px;
  width: 95%;
  height: 47.99px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: red;
  border: 0;
  color: white;
  font-weight: 600;
  margin-bottom: 8px;
  border-radius: 99px;
}
</style>
